<!--
 * @Descripttion: 
 * @version: 
 * @Author: gonghong
 * @Date: 2023-07-11 16:57:24
-->

<script setup>
import { ref, reactive } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { toPageAuth } from '@/common/utils'
import { getOperatorInfo, workOrderStatisticsByOperatorId } from '@/api/system'

//统计数据
const statisticInfo = ref(null)
//用于保存用户信息
const operatorInfo = ref(null)

const menuConfig = {
  安装: [
    {
      url: '/homePages/installDevice/index',
      label: '添加设备',
      icon: '../../static/images/add-device.png',
      color: 'linear-gradient(136deg, #2B85FF 0%, #41BAFF 100%)'
    },
    {
      url: '/homePages/installationList/index',
      label: '安装设备',
      icon: '../../static/images/install-device.png',
      color: 'linear-gradient(135deg, #F9B240 0%, #FFE0A5 100%)'
    },
    {
      url: '/homePages/findInstalledDevice/index',
      label: '查找设备',
      icon: '../../static/images/add-device.png',
      color: 'linear-gradient(136deg, #2B85FF 0%, #41BAFF 100%)'
    },
	{
	  url: '/homePages/alarmSelect/alarmSelect',
	  label: '报警器配对',
	  icon: '../../static/images/add-device.png',
	  color: 'linear-gradient(136deg, #2B85FF 0%, #41BAFF 100%)'
	},
	// {
	//   url: '/homePages/blueBind/blueBind',
	//   label: '报警器配对(驰诚)',
	//   icon: '../../static/images/add-device.png',
	//   color: 'linear-gradient(136deg, #2B85FF 0%, #41BAFF 100%)'
	// },
 //  {
 //      url: '/homePages/bluetoothPairing/bluetoothPairing',
 //      label: '报警器配对(鑫豪斯)',
 //      icon: '../../static/images/add-device.png',
 //      color: 'linear-gradient(136deg, #2B85FF 0%, #41BAFF 100%)'
 //    },
	
  ],
  维修: [
    {
      url: '/homePages/repairList/index',
      label: '维修设备',
      icon: '../../static/images/weixiu-device.png',
      color: 'linear-gradient(315deg, #2BFFBF 0%, #3FD2FF 100%)'
    },
    {
      url: '/homePages/alarmManagement/index',
      label: '报警管理',
      icon: '../../static/images/group-icon.png',
      color: 'linear-gradient(315deg,  #FFD6A5 0%, #FF8C10 100%)'
    },
    {
      url: '/homePages/workOrder/index',
      label: '工单管理',
      icon: '../../static/images/wordOrder-icon.png',
      color: 'linear-gradient(315deg,  #A5BBFF 10% , #4083F9 100%)'
    },
   
  ]
}

let menuArr = reactive([])

onShow(async () => {
  //跳转登陆页面
  if (!uni.getStorageSync('accessToken')) {
    uni.navigateTo({ url: `/pages/login/index` })
    return
  }

  workOrderStatisticsByOperatorId().then((result) => {
    const resultData = result.data || {}
    statisticInfo.value = resultData
  })

  //获取用户信息和菜单权限
  uni.showLoading({ title: '加载中' })
  const operatorResult = await getOperatorInfo()
  uni.hideLoading()
  operatorInfo.value = operatorResult.data

  //菜单权限转换
  if (operatorInfo.value && operatorInfo.value.installationMaintenance) {
    const installationMaintenance = operatorInfo.value?.installationMaintenance
    const installJSON = JSON.parse(installationMaintenance)
    if (installJSON && Array.isArray(installJSON)) {
      menuArr.length = 0
      installJSON.map((key) => {
        if (menuConfig[key]) {
          menuArr.push(...menuConfig[key])
        }
      })
    }
    // console.log(22222, menuArr)
  }
})

/**
 * 跳转到指定页面、做鉴权拦截
 * @param url
 */
const toPage = (url) => {
  uni.navigateTo({ url: url })
}
</script>

<template>
  <view class="container">
    <view class="top-swaper">
      <view class="icon-box">
        <image :src="`../../static/images/home_icon.png`" class="home_icon" />
      </view>
    </view>
    <view class="menu-swaper">
      <view class="total-box">
        <view class="f-flex f-df f-fd-c f-jc-c f-ai-c">
          <text class="total-num">{{ statisticInfo?.installWorkOrderCount || 0 }}</text>
          <text class="title">未安装数</text>
        </view>
        <view class="line" />
        <view class="f-flex f-df f-fd-c f-jc-c f-ai-c">
          <text class="total-num">{{ statisticInfo?.maintainWorkOrderCount || 0 }}</text>
          <text class="title">未维修数</text>
        </view>
      </view>
      <!-- 功能菜单 -->
      <view class="order-section">
        <view
          :class="['order-item']"
          v-for="(item, index) in menuArr"
          :key="index"
          @click="toPage(item.url)"
          :style="{ background: item.color }"
        >
          <image :src="item.icon" class="icon" />
          <text class="text">{{ item.label }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.top-swaper {
  height: 50%;
  background: linear-gradient(180deg, rgba(48, 128, 255, 0.67) 0%, #e7f0ff 100%);
  position: relative;

  .icon-box {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    justify-content: center;
    .home_icon {
      position: absolute;
      bottom: 0;
      z-index: 1;
      width: 682upx;
      height: 552upx;
    }
  }
}
.menu-swaper {
  position: absolute;
  z-index: 2;
  height: 54%;
  width: 100%;
  bottom: 0;
  background: #fff;
  border-radius: 29px 29px 0px 0px;
}

.total-box {
  display: flex;
  justify-content: space-between;
  color: #151515;
  font-size: 44upx;
  height: 86upx;
  padding: 50upx 0;
  .title {
    font-size: 24upx;
  }
  .line {
    width: 1px;
    height: 100%;
    background: #d2d2d2;
  }
}

.order-section {
  display: flex;
  justify-content: space-around;
  align-content: center;
  flex-wrap: wrap;
  .order-item {
    width: 208upx;
    height: 180upx;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 40upx;
    .icon {
      width: 64upx;
      height: 64upx;
    }
    .text {
      color: #fff;
      font-size: 28upx;
      margin-top: 20upx;
    }
  }
  .visibility {
    visibility: hidden;
  }
}
</style>
